<script lang="ts">
  import { createEventDispatcher, afterUpdate, tick } from 'svelte';
  import { BroadcastContentType, type BroadcastContent } from '../types/vtuber';
  const emit = createEventDispatcher();

  export let maxLine: number = 12;
  export let content: BroadcastContent;
  export let isShow: boolean = false;
  // 行数
  let line: number = 1;
  let messageDom: HTMLElement | void;
  let needMore: boolean = true;
  // 是否已经超过显示成...
  let hasMore: boolean = false;
  let highLightDom: HTMLElement | void;
  let captionItem: HTMLElement | void;
  // 计算高度
  const calculatedHeight = () => {
    if (
      [BroadcastContentType.Vtuber, BroadcastContentType.Greeting].includes(content.contentType) &&
      messageDom
    ) {
      const height = messageDom.clientHeight;
      hasMore = messageDom.scrollHeight > messageDom.offsetHeight;
      const nowLine = Math.floor(height / 20);
      line = nowLine > 4 ? 4 : nowLine;
    }
  };
  afterUpdate(() => {
    calculatedHeight();
  });
  $: {
    if (isShow) {
      calculatedHeight();
    }
  }
  $: {
    if (content?.content?.nowValue) {
      tick().then(() => {
        if (highLightDom && captionItem) {
          emit('changeScrollTop', { top: highLightDom.offsetTop + captionItem.offsetTop });
        }
      });
    }
  }
</script>

<div class="caption-item" bind:this={captionItem}>
  {#if [BroadcastContentType.Vtuber, BroadcastContentType.Greeting].includes(content.contentType)}
    <div
      class="message vtuber-message {hasMore && needMore ? 'has-more' : ''}"
      style="--maxLine:{maxLine}"
    >
      <div class="corner-left line{line}"></div>
      <div class="corner-right line{line}"></div>
      <div class="notching {needMore ? 'clamp' : ''}" bind:this={messageDom}>
        {content.content.removedValue}<span class="high-light" bind:this={highLightDom}
          >{content.content.nowValue}</span
        >{content.content.remainValue}
      </div>
      {#if hasMore && needMore}
        <div class="look-more-container">
          <!-- svelte-ignore a11y-click-events-have-key-events -->
          <div class="look-more" on:click={() => (needMore = false)}>
            <img
              src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/07ab3644-2810-435a-9248-84557c03ce4b.png"
              alt=""
            />展开更多
          </div>
        </div>
      {/if}
    </div>
  {:else if content.contentType === BroadcastContentType.User}
    <div class="message user-message">
      <div class="notching">
        {content.content.remainValue}
      </div>
    </div>
  {:else}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div class="button" on:click={() => emit('broadcastLive')}>
      <img
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/0fb27431-7cd6-4984-ad04-f6361d89d92e.png"
        alt=""
        class="ssjp"
      />
      <span>实时解盘</span>
      <img
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/df03e1b4-c88e-4aae-8c62-9deca99939b4.png"
        alt=""
        class="ssjp-more"
      />
    </div>
  {/if}
</div>

<style lang="less">
  .caption-item {
    width: fit-content;
    margin-bottom: 12px;
    .corner-left {
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      left: -2px;
      top: -2px;
    }
    .corner-right {
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      right: -2px;
      bottom: -2px;
      transform: rotate(180deg);
    }
    .line1 {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/bc7bf14f-1473-4893-8623-8c2aeff0a24a.png');
      width: 32px;
      height: 32px;
    }
    .line2 {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/01ec0f47-3963-4353-8dc5-31d2b8fcafa9.png');
      width: 52px;
      height: 52px;
    }
    .line3 {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/ab92b9f6-199e-4132-9d87-08a9e29046ab.png');
      width: 72px;
      height: 72px;
    }
    .line4 {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/2c9083fa-38b0-4b0d-be5f-8464ba6a37d5.png');
      width: 92px;
      height: 92px;
    }
    .vtuber-message {
      position: relative;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: justify;
      font-weight: 400;
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/f954b189-75f7-40b5-9845-97495a0082c2.png');
      background-size: 260px 128px;
      background-repeat: repeat;
      border: 1px solid #00a0ff;
      // background-color: rgba(0, 92, 255, 0.3);
      background-color: rgba(12, 52, 127, 0.9);
      padding: 12px;
      box-sizing: border-box;
      &.has-more {
        padding-bottom: 7px;
      }
      // &::before {
      //   content: '';
      //   border-top: 6px #00a0ff solid;
      //   border-right: 8px #00a0ff solid;
      //   border-left: 8px transparent solid;
      //   border-bottom: 6px transparent solid;
      //   position: absolute;
      //   right: 0;
      //   top: 0;
      // }
      // &::after {
      //   content: '';
      //   border-top: 6px #0b0d13 solid;
      //   border-right: 8px #0b0d13 solid;
      //   border-left: 8px transparent solid;
      //   border-bottom: 6px transparent solid;
      //   position: absolute;
      //   right: -1px;
      //   top: -1px;
      // }
      .notching {
        width: 100%;
        height: 100%;
        .high-light {
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #ffb300;
          letter-spacing: 0;
          text-align: justify;
          text-shadow: 0 2px 2px rgba(0, 10, 106, 0.5);
          font-weight: 600;
        }
        &.clamp {
          overflow: hidden;
          /* 将对象作为弹性伸缩盒子模型显示 。 */
          display: -webkit-box;
          /* 限制在一个块元素显示的文本的行数，即行数设置 */
          -webkit-line-clamp: var(--maxLine);
          /* 规定框从上向下垂直排列子元素 */
          -webkit-box-orient: vertical;
        }

        // &::before {
        //   content: '';
        //   border-top: 6px transparent solid;
        //   border-right: 8px transparent solid;
        //   border-left: 8px #00a0ff solid;
        //   border-bottom: 6px #00a0ff solid;
        //   position: absolute;
        //   left: 0;
        //   bottom: 0;
        // }
        // &::after {
        //   content: '';
        //   border-top: 6px transparent solid;
        //   border-right: 8px transparent solid;
        //   border-left: 8px #0b0d13 solid;
        //   border-bottom: 6px #0b0d13 solid;
        //   position: absolute;
        //   left: -1px;
        //   bottom: -1px;
        // }
      }
      .look-more-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #028ffc;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
        margin-top: 3px;
        .look-more {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
    }
    .user-message {
      position: relative;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: justify;
      font-weight: 400;
      background: rgba(66, 66, 66, 0.9);
      // background: rgba(190, 190, 190, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 12px;
      box-sizing: border-box;
      // &::before {
      //   content: '';
      //   border-top: 6px rgba(255, 255, 255, 0.4) solid;
      //   border-right: 8px rgba(255, 255, 255, 0.4) solid;
      //   border-left: 8px transparent solid;
      //   border-bottom: 6px transparent solid;
      //   position: absolute;
      //   right: 0;
      //   top: 0;
      // }
      // &::after {
      //   content: '';
      //   border-top: 6px #0b0d13 solid;
      //   border-right: 8px #0b0d13 solid;
      //   border-left: 8px transparent solid;
      //   border-bottom: 6px transparent solid;
      //   position: absolute;
      //   right: -1px;
      //   top: -1px;
      // }
      .notching {
        width: 100%;
        height: 100%;
        // &::before {
        //   content: '';
        //   border-top: 6px transparent solid;
        //   border-right: 8px transparent solid;
        //   border-left: 8px rgba(255, 255, 255, 0.4) solid;
        //   border-bottom: 6px rgba(255, 255, 255, 0.4) solid;
        //   position: absolute;
        //   left: 0;
        //   bottom: 0;
        // }
        // &::after {
        //   content: '';
        //   border-top: 6px transparent solid;
        //   border-right: 8px transparent solid;
        //   border-left: 8px #0b0d13 solid;
        //   border-bottom: 6px #0b0d13 solid;
        //   position: absolute;
        //   left: -1px;
        //   bottom: -1px;
        // }
      }
    }
    .notching {
      width: 100%;
    }

    .button {
      width: 132px;
      height: 44px;
      display: flex;
      align-items: center;
      background: #0d4e96;
      border-radius: 2px;
      cursor: pointer;
      .ssjp {
        width: 32px;
        height: 32px;
        margin-left: 6px;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #f2f2f2;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
        margin-left: 6px;
      }
      .ssjp-more {
        width: 16px;
        height: 16px;
        margin-left: 8px;
      }
    }
  }
</style>
